<template>
  <view class="infoWrapper">
    <view class="chooseInfo">
      <view class="infoTitle">{{ $t('GetUserProfile.HeaderPicture.Text') }}</view>
      <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
        <image class="avatar" :src="avatarUrl" mode="widthFix"></image>
      </button>
    </view>
    <view class="chooseInfo">
      <view class="infoTitle">{{ $t('GetUserProfile.NickName.Text') }}</view>
      <input
        type="nickname"
        class="weui-input"
        :placeholder="$t('GetUserProfile.NickName.Input')"
        :value="nickName"
        @input="inputName"
      />
      <view class="nicknameDes">{{ $t('GetUserProfile.NickName.Limit.Des.Text') }}</view>
    </view>
    <view class="chooseInfo" @click="goDeleteAccount">
      <view class="infoTitle">{{ $t('GetUserProfile.AccountCancellation.Text') }}</view>
    </view>
    <button class="login shadow" :class="{ disabled: !((setAvatar || setNickname) && nameCorrect) }" @click="confirm">
      {{ $t('APP.Common.Confirm.Text') }}
    </button>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
import { changeNickname } from '@/api/account'
import { useAuthStore } from '@/store/auth'

const i18n = useI18n()
const authStore = useAuthStore()

const defaultAvatarUrl = i18n.t('GetUserProfile.HeadPicture.Default.Image')

let getProfile = false

const avatarUrl = ref(defaultAvatarUrl)
const setNickname = ref(false)
const setAvatar = ref(false)
const nickName = ref('')
const nameCorrect = ref(true)

onLoad((options) => {
  if (options?.avatarUrl) {
    getProfile = true
    avatarUrl.value = options.avatarUrl
  }
  nickName.value = options?.nickName
})
/**
 * 选择头像
 * @param e
 */
function onChooseAvatar(e: WechatMiniprogram.CustomEvent<{ avatarUrl: string }>) {
  avatarUrl.value = e.detail.avatarUrl
  getProfile = true
  setAvatar.value = true
}
/**
 * 重新输入账号名
 * @param e
 */
function inputName(e: Event) {
  let name = (e as unknown as WechatMiniprogram.Input).detail.value
  checkUserName(name)
  getProfile = true
}
/**
 * 确定修改
 */
async function confirm() {
  const valid = !((setAvatar.value || setNickname.value) && nameCorrect.value)
  if (valid) return
  const oldProfile = uni.getStorageSync('userProfile')
  const newProfile = {
    ...oldProfile,
    ...(nickName.value && { nickName: nickName.value }),
    ...(avatarUrl.value && { avatarUrl: avatarUrl.value }),
  }
  uni.setStorageSync('userProfile', newProfile)
  if (setNickname.value) {
    uni.showLoading({
      title: i18n.t('APP.Common.Loading.Text'),
    })
    const res = await changeNickname(nickName.value)
    authStore.updateToken(res.data)
    uni.navigateBack({
      delta: 1,
    })
    return
  }
  uni.navigateBack({
    delta: 1,
  })
}
/**
 * 跳转注销账户页面
 */
function goDeleteAccount() {
  uni.navigateTo({
    url: `/pages/my/deleteAccount/deleteAccount?getProfile=${getProfile}&nickName=${
      getProfile ? nickName.value : ''
    }&nickImg=${getProfile ? avatarUrl.value : ''}`,
  })
}
function checkUserName(name: string) {
  let pattern = /^[a-zA-Z\u4e00-\u9fa5]{2,32}$/
  let zhPattern = /[\u4e00-\u9fa5]/g
  let enPattern = /[a-zA-Z]/g
  if (pattern.test(name)) {
    let zh = name.match(zhPattern)
    let en = name.match(enPattern)
    let zhLength = name.match(zhPattern)?.length as number
    let enLength = name.match(enPattern)?.length as number
    let newZhLength = zh ? zhLength * 2 : 0
    let newEnLength = en ? enLength * 2 : 0
    if (newZhLength + newEnLength <= 32) {
      setNickname.value = true
      nameCorrect.value = true
      nickName.value = name
      return
    }
  }
  nameCorrect.value = false
}
</script>
<style lang="less">
@import '@/styles/common.less';
.infoWrapper {
  padding: 0 32rpx;
  box-sizing: border-box;
  .chooseInfo {
    position: relative;
    width: 100%;
    height: 112rpx;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid rgba(151, 151, 151, 0.1);
  }
  .infoTitle {
    position: absolute;
    left: 0;
    font-size: 34rpx;
    color: #383838;
  }
  .avatar-wrapper {
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    width: 64rpx;
    height: 64rpx;
    border-radius: 32rpx;
  }
  .avatar-wrapper::after {
    border: none;
  }
  .avatar {
    width: 64rpx;
    height: 64rpx;
    border-radius: 32rpx;
  }
  .weui-input {
    position: absolute;
    right: 0;
    width: 80%;
    height: 100%;
    text-align: right;
  }
  .nicknameDes {
    position: absolute;
    bottom: -43rpx;
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.54);
    line-height: 34rpx;
  }
  .login {
    position: relative;
    top: 150rpx;
    left: auto;
  }
  .disabled {
    opacity: 0.4;
  }
  .shadow {
    box-shadow: 0 10rpx 30rpx 0 rgba(19, 27, 53, 0.1);
  }
}
</style>
